<template>
	<scroll-view
	  class="scroller"
	  scroll-y
	  :refresher-enabled="refresherEnabled"
	  upper-threshold=40
	  :refresher-background="background"
	  :refresher-triggered="refresherTriggered"
	  :scroll-top="scrollTop"
	  lower-threshold="100"
	  refresher-default-style="white"
	  refresher-background="#343541"
	  @scroll="onScroll"
	  @scrolltolower="lower"
	  @refresherrefresh="onRefresh" 
	  @refresherrestore="onRestore" 
	  @refresherabort="onAbort"
	>
	  <slot></slot>
	  
	  <uni-loadmore :status="infiniteStatus" :text="noMoreText"></uni-loadmore>
	</scroll-view>
</template>

<script>
	//刷新状态 0 未触发 1 触发  2 刷新中
	const REFRESH_STATUS ={ 
	  NORMAL: 0,
	  READY: 1,
	  RUNNING: 2
	}
	
	//无限加载状态 -2 数据太少或没有数据 -1 没有更多 0 未初始化 1 有更多 
	const INFINITE_STATUS = {
	  NODATA: -2,
	  NOMORE: -1,
	  NULL: 0,
	  MORE: 1
	}
	
	export default {
		props:{
			background:{
				type:String,
				default: "#FFFFFF"
			},
			refresherEnabled:{
				type: Boolean,
				default: true
			},
			noMore: { // 没有更多
			  type: Boolean,
			  default: false
			},
			noMoreText: { // 没有更多显示文本
			  type: String,
			  default: '-- 我是有底线的 --'
			},
			upperThreshold: { // 触发顶部阈值
			  type: Number / String,
			  default: 20
			},
			refreshStatus: { // 刷新状态
			  type: Number,
			  default: REFRESH_STATUS.NORMAL
			},
			infiniteStatus: { // 无限加载状态
			  type: Number,
			  default: INFINITE_STATUS.NULL
			},
			refreshLayerColor: {
			  type: String,
			  default: global.PRIMARY_COLOR
			},
			infiniteLayerColor: {
			  type: String,
			  default: global.PRIMARY_COLOR
			},
			triggered:{
				type: Boolean,
				default: false
			},
			scrollTop:{
				type: Number,
				default: 0
			},
			scrollIntoView:{
				type: String
			}
			
		},
		computed:{
			refresherTriggered:function(){
				return this.triggered;
			}
		},
		methods:{
			/**
			 * 加载更多
			 * @param {Object} e
			 */
			lower(e) {
				this.$emit('lower', e);
			},
			
			/**
			 * 刷新
			 */
			onRefresh(e) {
				this.$emit('refresh', e);
			},
			onRestore(e) {
				this.$emit('restore', e);
			},
			onAbort(e) {
				this.$emit('abort', e);
			},
			onScroll (e){
				this.$emit('scroll', e);
			}
		}
		
	}
</script>

<style>
	.scroller{
	  height: 100%;
	}
	.no-more{
	  height: 80rpx;
	  line-height: 80rpx;
	  text-align: center;
	  color: #333333;
	  font-size: 20rpx;
	}
</style>
